<template>
    <div class="my-tag">
        <input class="input" type="text" placeholder="输入标签" @keydown.enter="addTag" :value="value" v-if="isEdit"
            @blur="isEdit = false" v-focus />
        <div class="text" @dblclick="isEdit = true" v-else>
            {{ value }}
        </div>
    </div>
</template>

<script>
export default {
    name: "MyTag",
    props: {
        value: String
    },
    data() {
        return {
            isEdit: false,
        }
    },
    methods: {
        addTag(e) {
            this.isEdit = false;
            if (e.target.value) {
                this.$emit("input", e.target.value);
            } else {
                alert("标签不能为空");
                this.isEdit = false;
            }
        }
    }

}
</script>